﻿<? include('common/inc.init.php');?>
<!DOCTYPE html>
<head>
    <title>Contacto | Revoluci&oacute;n Pelota</title>
    <?php include(DIR_ROOT.'/common/head.php'); ?>
</head>
<body>
    <!-- TOP NAVIGATION BAR -->
<main class="main-content">
    <?php include(DIR_ROOT.'/common/top-nav.php'); ?>

    <section class="dona">
        <div class="row">
            <div class="small-12 columns">
                    <h2>DON&Aacute; TU PELOTA</h2>
            </div>
        </div>
        <div class="row dona-imgs">
            <div class="small-12 medium-4 columns">
                <div class="img-container">
                    <img src="img/dona1.png" alt="" />
                </div>
                <h4>HACES TU DONACI&Oacute;N</h4>
            </div>
            <div class="small-12 medium-4 columns">
                <div class="img-container">
                    <img src="img/dona2.png" alt="" />
                </div>
                <h4>LA PELOTA RUEDA</h4>
            </div>
            <div class="small-12 medium-4 columns">
                <div class="img-container">
                    <img src="img/dona3.png" alt="" />
                </div>
                <h4>UN NI&Ntilde;O FELIZ</h4>
            </div>
        </div>
        <div class="row">
            <div class="small-11 medium-8 medium-centered columns">
                <p>
                    Sumate a la Revolución y regalá tu Pelota. Nosotros nos encargamos de llevarla al potrero
                </p>
            </div>
        </div>
        <div class="row margin-b-50">
            <div class="small-11 small-centered medium-7 medium-centered large-5 large-centered columns">
                <button id="donate-now">Don&aacute;</button>
                <form id="contact-form" action="">
                    <div class="row">
                        <div class="small-12 columns form-group">
                            <input type="text" name="nombre" id="nombre_input" placeholder="Tu nombre *" /><i class="rp-sprite form1"></i>
                        </div>
                        <div class="small-12 medium-6 columns form-group">
                            <input type="email" name="email" id="email_input" placeholder="Tu email *" /><i class="rp-sprite form2"></i>
                        </div>
                        <div class="small-12 medium-6 columns form-group">
                            <input type="phone" name="telefono" id="telefono_input" placeholder="Tu tel&eacute;fono" /><i class="rp-sprite form3"></i>
                        </div>
                        <div class="small-12 columns form-group">
                            <textarea name="mensaje" placeholder="Mensaje *" id="mensaje_input"></textarea><i class="rp-sprite form5 msg-icon"></i>
                        </div>
                        <div class="small-12 columns">
                            <button onclick="submit;">Enviar</button>
                        </div>
                    </div>
                </form>
                <div class="hex-valid">
                    <div class="shape">
                        <div class="top"></div>
                        <div class="mid"></div>
                        <div class="bot"></div>
                    </div>
                    <div class="content">
                        <div class="center">
                            <h5>&iexcl;Gracias!</h5>
                            <p>Tu mensaje ha sido enviado</p>
                            <i class="fa fa-check"></i>
                        </div><span></span>
                    </div>
                </div>
                <div class="hex-invalid">
                    <div class="shape">
                        <div class="top"></div>
                        <div class="mid"></div>
                        <div class="bot"></div>
                    </div>
                    <div class="content">
                        <div class="center">
                            <h5>Error</h5>
                            <i class="fa fa-times"></i>
                        </div><span></span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
<?php include(DIR_ROOT.'/common/footer.php'); ?>
</main>

<?php include(DIR_ROOT.'/common/scripts.php'); ?>

<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_es.js"></script>
<script type="text/javascript">
    $('#donate-now').on('click', function(){
        $(this).fadeOut();
        $('.dona form').fadeIn();
    });
    
    
    $("#contact-form").validate({
        rules: {
            nombre: 'required',
            email: {
                required: true,
                email: true,
            },
            motivo: 'required',
            mensaje: {
                required: true,
                minlength: 10,
            },
        },
        submitHandler: function() {
             $.ajax({
                type: "POST",
                url: "common/ajax.php",
                data: { action: "donaciones", email: $('#email_input').val() , nombre: $('#nombre_input').val(), telefono: $('#telefono_input').val(), mensaje: $('#mensaje_input').val()  }
            }).done(function( res ) {
                response = jQuery.parseJSON(res);
                if(response.success) $('.hex-valid').fadeIn();
            });
        }
    });
</script>
</body>